<template>
  <div>
    <el-dialog
      v-model="visible"
      title="订单备注"
      @before-ok="createOk"
      @close="close(createRef)"
      width="700px"
      top="100px"
    >
      <el-form
        :model="createForm"
        ref="createRef"
        size="default"
        v-loading="initLoading"
      >
        <el-form-item prop="remark">
          <el-input
            v-model="createForm.remark"
            :rows="4"
            type="textarea"
            placeholder="请输入备注内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="flex center">
          <el-button @click="visible = false">取消</el-button>
          <el-button
            type="primary"
            :loading="btnLoading"
            :disabled="btnLoading"
            @click="createOk(createRef)"
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>
  <script lang="ts">
export default {
  name: "storeOrderRemark",
};
</script>
<script lang="ts" setup>
import { ref, getCurrentInstance, nextTick, reactive } from "vue";
import type { FormInstance } from "element-plus";
import type { Result, ResultError } from "@/types";
import { getOrderDetail, updateOrderRemark } from "@/api/store/order";
import { create } from "@/api/system/menus";

const {
  proxy: { $message, $utils },
} = getCurrentInstance() as any;

const emit = defineEmits(["success"]);

const visible = ref<boolean>(false);

const operationId = ref<number>(0);

const createRef = ref<typeof FormInstance>();

const btnLoading = ref<boolean>(false);

const initLoading = ref<boolean>(true);

const createForm = ref<any>({
  remark: "",
});

const toInit = () => {
  if (!operationId.value) {
    initLoading.value = false;
    return;
  }
  getOrderDetail({ id: operationId.value })
    .then((res: Result) => {
      createForm.value.remark = res.data.remark;
      initLoading.value = false;
    })
    .catch((err: ResultError) => {
      $utils.errorMsg(err);
      close();
    });
};

const createOk = async (formEl: typeof FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate((valid: any, fields: any) => {
    if (valid) {
      if (btnLoading.value) {
        return;
      }
      btnLoading.value = true;
      updateOrderRemark({
        id: operationId.value,
        remark: createForm.value.remark,
      })
        .then((res: Result) => {
          $utils.successMsg(res);
          emit("success");
          close();
        })
        .catch((err: ResultError) => {
          $utils.errorMsg(err);
          close();
        });
    }
  });
};

const open = (id: number = 0) => {
  initLoading.value = true;
  if (id != 0) {
    operationId.value = id;
  }
  nextTick(() => {
    toInit();
  });
  visible.value = true;
};

const close = async (formEl: typeof FormInstance | undefined = undefined) => {
  if (formEl) {
    formEl.resetFields();
  }
  operationId.value = 0;
  btnLoading.value = false;
  visible.value = false;
};

defineExpose({ open });
</script>